<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>table</title>
  <style>

    .success{
      width: 110%;
      background-color: green;
      border-radius: 3px;
      color: aliceblue;
      padding: 0 5px;
    }
    .warning{
      width: 110%;
      background-color: orange;
      border-radius: 3px;
      color: aliceblue;
      padding: 0 5px;
    }
    table {
      width: 100%;
      height: auto;
      border-bottom: 2px solid #f3f3f3;
      border-collapse: collapse;
      text-align: center;
    }
    #title th{
      border-bottom: 2px solid #e3e3e3 ;
    }
    #one td{
      padding: 10px;
      border-bottom: 2px solid #e3e3e3 ;
    }
    #two{
      border-bottom: 2px solid gray;
    }
    #two td{
      background:white;
      border-bottom: 2px solid #e3e3e3 ;
      padding: 10px;
    }
    #there td{
      border-bottom: 2px solid #e3e3e3 ;
      padding: 10px;
    }
    tbody tr:nth-child(odd) {
      background-color: #f2f2f2;
    }
    .main a{
      display: inline-block;
      padding: 6px 20px;
      background-color: red;
      text-decoration: none;
      color: white;
      border-radius: 8px;
      margin: 5px 10px;
    }
  </style>
</head>
<body>
<div class="header">
  <h3>学生信息</h3>
  <p>说明：一下为2046级学生名单，共四人，<span class="success">成功加载三人</span>。
    <span class="warning">警告：列表不包括降级学生</span>。</p>
</div>
<div class="main">
  <table>
    <thead>
    <tr id="title">
      <th>#</th>
      <th>姓名</th>
      <th>班级</th>
      <th>Email</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr id="one">
      <td>1</td>
      <td>郭立新</td>
      <td>软件工程2046级1班</td>
      <td>guo@example.com</td>
      <td>
        <a href="">修改</a>
        <a href="">删除</a>
      </td>
    </tr>
    <tr id="two">
      <td>2</td>
      <td>黄英</td>
      <td>软件工程2046级1班</td>
      <td>guang@example.com</td>
      <td>
        <a href="">修改</a>
        <a href="">删除</a>
      </td>
    </tr>
    <tr id="there">
      <td>3</td>
      <td>吕慧玲</td>
      <td>软件工程2046级2班</td>
      <td>lv@example.com</td>
      <td>
        <a href="">修改</a>
        <a href="">删除</a>
      </td>
    </tr>
    </tbody>
  </table>
</div>
</body>
</html>